<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>上传和下载</title>
    <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.3/css/bootstrap.min.css" rel="stylesheet">
    <!-- bootstrap-input相关 -->
    <link href="/css/fileinput.min.css" rel="stylesheet">
    <script src="/js/fileinput.min.js"></script>
    <script src="/js/zh.min.js"></script>

    <style>
        .form-border {
            margin-top: 10px;
            border-radius: 2px;
            border-width: thin;
            border-style: solid;
            border-color: lightgray;
        }


        a {
            text-decoration: none;
            color: #FFF;
        }

    </style>
</head>
<body>
<div class="col-sm-12">
    <span class="text-center text-info form-control" style="font-size: 24px;">文件上传和下载</span>
    <div class="form-border">
        <form action="/file/uploadFile" enctype="multipart/form-data" method="post"
              class="form-horizontal">
            <div class="form-group row" style="margin-top: 20px;">
                <label for="file" class="col-sm-2 col-form-label-sm">选择上传文件：</label>
                <div class="col-sm-9">
                    <input id="file" type="file" class="form-control form-control-sm" name="file">
                </div>
                <div class="col-sm-1">
                    <input class="btn btn-sm btn-block btn-outline-success" type="submit" value="上传">
                </div>
            </div>
        </form>
    </div>


    <a class="form-control" href="/file/downloadFile?fileName=b.xlsx" style="margin-top: 10px; ">
        <span class="text-warning " style="font-size: 16px;">下载文件</span>
    </a>

</div>


<script type="text/javascript">
    $(function () {
        // 当id为file的对象发生变化时
        $("#file").change(function () {
            let fileSize = this.files[0].size;
            let size = fileSize / 1024 / 1024;
            if (size > 20) {
                alert("附件不能大于100M,请将文件分割后重新上传！");
                this.value = "";
                return false;
            } else {
                //将#file的值赋给#file_name
                $("#fileName").val($("#file").val());
            }
        })
    });
</script>
</body>
</html>